રિએક્ટ સિલેક્ટિવ હાઈડ્રેશન સાથે ઝડપી વેબ પરફોર્મન્સ મેળવો. આ ઊંડાણપૂર્વકની માર્ગદર્શિકા સમજાવે છે કે કમ્પોનન્ટ-લેવલ હાઈડ્રેશન કેવી રીતે કાર્ય કરે છે, વપરાશકર્તાના અનુભવ માટે તેના ફાયદા અને વૈશ્વિક એપ્લિકેશન્સ માટે વ્યવહારુ અમલીકરણ વ્યૂહરચનાઓ.
વેબ પરફોર્મન્સમાં નિપુણતા: રિએક્ટ સિલેક્ટિવ હાઈડ્રેશનનો ઊંડાણપૂર્વક અભ્યાસ
આધુનિક ડિજિટલ પરિદ્રશ્યમાં, ઝડપ એ માત્ર એક સુવિધા નથી; તે સકારાત્મક વપરાશકર્તા અનુભવનો પાયો છે. વૈશ્વિક એપ્લિકેશન્સ માટે, જ્યાં વપરાશકર્તાઓ વિવિધ પ્રકારના ઉપકરણો અને નેટવર્ક પરિસ્થિતિઓમાં સામગ્રીનો ઉપયોગ કરે છે, ત્યાં પરફોર્મન્સ સર્વોપરી છે. ધીમી લોડ થતી સાઇટ વપરાશકર્તાની હતાશા, ઊંચા બાઉન્સ રેટ અને આવકના નુકસાન તરફ દોરી શકે છે. વર્ષોથી, ડેવલપર્સે પ્રારંભિક લોડ સમયને સુધારવા માટે સર્વર-સાઇડ રેન્ડરિંગ (SSR) નો ઉપયોગ કર્યો છે, પરંતુ તેની સાથે એક મોટો પડકાર હતો: જ્યાં સુધી સમગ્ર જાવાસ્ક્રિપ્ટ બંડલ ડાઉનલોડ અને એક્ઝિક્યુટ ન થાય ત્યાં સુધી પેજ બિન-ઇન્ટરેક્ટિવ રહેતું હતું. આ જ જગ્યાએ રિએક્ટ 18 એ એક ક્રાંતિકારી ખ્યાલ રજૂ કર્યો: સિલેક્ટિવ હાઈડ્રેશન.
આ વ્યાપક માર્ગદર્શિકા સિલેક્ટિવ હાઈડ્રેશનની જટિલતાઓને શોધશે. અમે વેબ રેન્ડરિંગના મૂળભૂત સિદ્ધાંતોથી લઈને રિએક્ટની કોન્કરન્ટ સુવિધાઓની અદ્યતન મિકેનિક્સ સુધીની સફર કરીશું. તમે માત્ર એ જ નહીં શીખશો કે સિલેક્ટિવ હાઈડ્રેશન શું છે, પરંતુ તે કેવી રીતે કાર્ય કરે છે, તે કોર વેબ વાઇટલ્સ માટે ગેમ-ચેન્જર કેમ છે, અને તમે વિશ્વવ્યાપી પ્રેક્ષકો માટે ઝડપી, વધુ સ્થિતિસ્થાપક એપ્લિકેશન્સ બનાવવા માટે તેને તમારા પોતાના પ્રોજેક્ટ્સમાં કેવી રીતે અમલમાં મૂકી શકો છો.
રિએક્ટમાં રેન્ડરિંગનો વિકાસ: CSR થી SSR અને તેનાથી આગળ
સિલેક્ટિવ હાઈડ્રેશનની નવીનતાને ખરેખર સમજવા માટે, આપણે સૌ પ્રથમ તે માર્ગને સમજવો જોઈએ જે આપણને અહીં સુધી લાવ્યો છે. વેબ પેજીસને રેન્ડર કરવાની રીત નોંધપાત્ર રીતે વિકસિત થઈ છે, જેમાં દરેક પગલું પાછલા એકની મર્યાદાઓને હલ કરવાનો હેતુ ધરાવે છે.
ક્લાયંટ-સાઇડ રેન્ડરિંગ (CSR): SPA નો ઉદય
રિએક્ટ જેવી લાઇબ્રેરીઓ સાથે બનેલી સિંગલ પેજ એપ્લિકેશન્સ (SPAs) ના શરૂઆતના દિવસોમાં, ક્લાયંટ-સાઇડ રેન્ડરિંગ પ્રમાણભૂત હતું. પ્રક્રિયા સીધી છે:
- સર્વર એક ન્યૂનતમ HTML ફાઇલ મોકલે છે, જે ઘણીવાર માત્ર એક `` એલિમેન્ટ હોય છે, અને મોટી જાવાસ્ક્રિપ્ટ ફાઇલોની લિંક્સ હોય છે.
- બ્રાઉઝર જાવાસ્ક્રિપ્ટ ડાઉનલોડ કરે છે.
- રિએક્ટ બ્રાઉઝરમાં એક્ઝિક્યુટ થાય છે, કમ્પોનન્ટ્સને રેન્ડર કરે છે અને DOM બનાવે છે, જેનાથી પેજ દૃશ્યમાન અને ઇન્ટરેક્ટિવ બને છે.
ફાયદા: CSR પ્રારંભિક લોડ પછી અત્યંત ઇન્ટરેક્ટિવ, એપ જેવા અનુભવોને સક્ષમ કરે છે. પેજીસ વચ્ચે સંક્રમણ ઝડપી હોય છે કારણ કે સંપૂર્ણ પેજ ફરીથી લોડ કરવાની જરૂર નથી.
ગેરફાયદા: પ્રારંભિક લોડ સમય પીડાદાયક રીતે ધીમો હોઈ શકે છે. જાવાસ્ક્રિપ્ટ ડાઉનલોડ, પાર્સ અને એક્ઝિક્યુટ ન થાય ત્યાં સુધી વપરાશકર્તાઓ એક ખાલી સફેદ સ્ક્રીન જુએ છે. આના પરિણામે નબળો ફર્સ્ટ કન્ટેન્ટફુલ પેઇન્ટ (FCP) થાય છે અને તે સર્ચ એન્જિન ઓપ્ટિમાઇઝેશન (SEO) માટે હાનિકારક છે, કારણ કે સર્ચ એન્જિન ક્રોલર્સ ઘણીવાર ખાલી પેજ જુએ છે.સર્વર-સાઇડ રેન્ડરિંગ (SSR): ઝડપ અને SEO બચાવમાં
CSR ની મુખ્ય સમસ્યાઓ હલ કરવા માટે SSR રજૂ કરવામાં આવ્યું હતું. SSR સાથે, રિએક્ટ કમ્પોનન્ટ્સને સર્વર પર HTML સ્ટ્રિંગમાં રેન્ડર કરવામાં આવે છે. આ સંપૂર્ણ રીતે રચાયેલ HTML પછી બ્રાઉઝરને મોકલવામાં આવે છે.
- બ્રાઉઝર HTML મેળવે છે અને તરત જ રેન્ડર કરે છે, તેથી વપરાશકર્તા લગભગ તરત જ સામગ્રી જુએ છે (ઉત્તમ FCP).
- સર્ચ એન્જિન ક્રોલર્સ સામગ્રીને અસરકારક રીતે ઇન્ડેક્સ કરી શકે છે, જે SEO ને વેગ આપે છે.
- બેકગ્રાઉન્ડમાં, તે જ જાવાસ્ક્રિપ્ટ બંડલ ડાઉનલોડ થાય છે.
- એકવાર ડાઉનલોડ થઈ જાય, રિએક્ટ ક્લાયંટ પર ચાલે છે, જે હાલના સર્વર-રેન્ડર્ડ HTML સાથે ઇવેન્ટ લિસનર્સ અને સ્ટેટ જોડે છે. આ પ્રક્રિયાને હાઈડ્રેશન કહેવામાં આવે છે.
પારંપરિક SSR ની "અનકેની વેલી"
જ્યારે SSR એ ખાલી સ્ક્રીનની સમસ્યા હલ કરી, ત્યારે તેણે એક નવી, વધુ સૂક્ષ્મ સમસ્યા રજૂ કરી. પેજ વાસ્તવમાં ઇન્ટરેક્ટિવ બને તેના ઘણા સમય પહેલા તે ઇન્ટરેક્ટિવ દેખાય છે. આ એક "અનકેની વેલી" બનાવે છે જ્યાં વપરાશકર્તા એક બટન જુએ છે, તેને ક્લિક કરે છે, અને કંઈ થતું નથી. આનું કારણ એ છે કે તે બટનને કામ કરવા માટે જરૂરી જાવાસ્ક્રિપ્ટ હજી સુધી સમગ્ર પેજને હાઈડ્રેટ કરવાનું કામ પૂરું કરી શકી નથી.
આ હતાશા મોનોલિથિક હાઈડ્રેશનને કારણે થાય છે. રિએક્ટ 18 પહેલાના સંસ્કરણોમાં, હાઈડ્રેશન એ 'બધું અથવા કંઈ નહીં' જેવો મામલો હતો. સમગ્ર એપ્લિકેશનને એક જ પાસમાં હાઈડ્રેટ કરવી પડતી હતી. જો તમારી પાસે એક અત્યંત ધીમો કમ્પોનન્ટ (કદાચ એક જટિલ ચાર્ટ અથવા ભારે થર્ડ-પાર્ટી વિજેટ) હોય, તો તે સમગ્ર પેજના હાઈડ્રેશનને અવરોધિત કરતું હતું. તમારું હેડર, સાઇડબાર અને મુખ્ય સામગ્રી સરળ હોઈ શકે છે, પરંતુ તેઓ ત્યાં સુધી ઇન્ટરેક્ટિવ ન બની શકતા જ્યાં સુધી સૌથી ધીમો કમ્પોનન્ટ પણ તૈયાર ન થઈ જાય. આ ઘણીવાર નબળા ટાઇમ ટુ ઇન્ટરેક્ટિવ (TTI) તરફ દોરી જાય છે, જે વપરાશકર્તાના અનુભવ માટે એક મહત્વપૂર્ણ મેટ્રિક છે.
હાઈડ્રેશન શું છે? મુખ્ય ખ્યાલને સમજવું
ચાલો હાઈડ્રેશન વિશેની આપણી સમજને વધુ સ્પષ્ટ કરીએ. એક ફિલ્મના સેટની કલ્પના કરો. સર્વર સ્થિર સેટ (HTML) બનાવે છે અને તે તમને મોકલે છે. તે વાસ્તવિક દેખાય છે, પરંતુ અભિનેતાઓ (જાવાસ્ક્રિપ્ટ) હજી આવ્યા નથી. હાઈડ્રેશન એ અભિનેતાઓના સેટ પર આવવાની, તેમની સ્થિતિ લેવાની અને એક્શન અને સંવાદ (ઇવેન્ટ લિસનર્સ અને સ્ટેટ) સાથે દ્રશ્યને જીવંત બનાવવાની પ્રક્રિયા છે.
પારંપરિક હાઈડ્રેશનમાં, મુખ્ય સ્ટારથી લઈને બેકગ્રાઉન્ડ એક્સ્ટ્રા સુધીના દરેક અભિનેતાને નિર્દેશક "એક્શન!" કહે તે પહેલાં પોતાની જગ્યાએ હોવું જરૂરી હતું. જો એક અભિનેતા ટ્રાફિકમાં ફસાઈ જાય, તો સમગ્ર નિર્માણ અટકી જતું. સિલેક્ટિવ હાઈડ્રેશન બરાબર આ જ સમસ્યાને હલ કરે છે.
સિલેક્ટિવ હાઈડ્રેશનનો પરિચય: ધ ગેમ-ચેન્જર
સિલેક્ટિવ હાઈડ્રેશન, રિએક્ટ 18 માં સ્ટ્રીમિંગ SSR નો ઉપયોગ કરતી વખતે ડિફોલ્ટ વર્તણૂક, મોનોલિથિક મોડેલથી મુક્ત થાય છે. તે તમારી એપ્લિકેશનને ટુકડાઓમાં હાઈડ્રેટ કરવાની મંજૂરી આપે છે, જે ભાગો સૌથી મહત્વપૂર્ણ છે અથવા જેની સાથે વપરાશકર્તા સંપર્ક કરી રહ્યા છે તેને પ્રાથમિકતા આપે છે.
અહીં તે કેવી રીતે મૂળભૂત રીતે રમતને બદલે છે:
- નોન-બ્લોકિંગ હાઈડ્રેશન: જો કોઈ કમ્પોનન્ટ હજી હાઈડ્રેટ થવા માટે તૈયાર નથી (ઉદાહરણ તરીકે, તેનો કોડ `React.lazy` દ્વારા લોડ કરવાની જરૂર છે), તો તે હવે બાકીના પેજને અવરોધિત કરતું નથી. રિએક્ટ તેને છોડી દેશે અને આગામી ઉપલબ્ધ કમ્પોનન્ટને હાઈડ્રેટ કરશે.
- સસ્પેન્સ સાથે સ્ટ્રીમિંગ HTML: સર્વર પર ધીમા કમ્પોનન્ટની રાહ જોવાને બદલે, રિએક્ટ તેની જગ્યાએ ફોલબેક (જેમ કે સ્પિનર) મોકલી શકે છે. એકવાર ધીમો કમ્પોનન્ટ તૈયાર થઈ જાય, તેનું HTML ક્લાયંટને સ્ટ્રીમ કરવામાં આવે છે અને એકીકૃત રીતે સ્વેપ કરવામાં આવે છે.
- વપરાશકર્તા-પ્રાથમિકતાવાળું હાઈડ્રેશન: આ સૌથી તેજસ્વી ભાગ છે. જો કોઈ વપરાશકર્તા કોઈ કમ્પોનન્ટ સાથે સંપર્ક કરે છે (દા.ત., બટન ક્લિક કરે છે) તે હાઈડ્રેટ થાય તે પહેલાં, રિએક્ટ તે વિશિષ્ટ કમ્પોનન્ટ અને તેના પેરેન્ટ્સને હાઈડ્રેટ કરવાને પ્રાથમિકતા આપશે. તે ઇવેન્ટને રેકોર્ડ કરે છે અને હાઈડ્રેશન પૂર્ણ થયા પછી તેને ફરીથી ચલાવે છે, જેનાથી એપ્લિકેશન તરત જ પ્રતિભાવશીલ લાગે છે.
આપણા સ્ટોરની સામ્યતા પર પાછા ફરીએ તો: સિલેક્ટિવ હાઈડ્રેશન સાથે, ગ્રાહકો તૈયાર થતાં જ ચેકઆઉટ કરીને જઈ શકે છે. વધુ સારું, જો ઉતાવળમાં કોઈ ગ્રાહક ચેકઆઉટની નજીક હોય, તો સ્ટોર મેનેજર (રિએક્ટ) તેમને પ્રાથમિકતા આપી શકે છે, તેમને લાઇનમાં આગળ જવા દે છે. આ વપરાશકર્તા-કેન્દ્રિત અભિગમ એ છે જે અનુભવને ઘણો ઝડપી બનાવે છે.
સિલેક્ટિવ હાઈડ્રેશનના સ્તંભો: સસ્પેન્સ અને કોન્કરન્ટ રેન્ડરિંગ
સિલેક્ટિવ હાઈડ્રેશન કોઈ જાદુ નથી; તે રિએક્ટમાં બે શક્તિશાળી, એકબીજા સાથે જોડાયેલી સુવિધાઓનું પરિણામ છે: સર્વર-સાઇડ સસ્પેન્સ અને કોન્કરન્ટ રેન્ડરિંગ.
સર્વર પર રિએક્ટ સસ્પેન્સને સમજવું
તમે કદાચ `React.lazy` સાથે કોડ-સ્પ્લિટિંગ માટે ક્લાયંટ પર `
` નો ઉપયોગ કરવાથી પરિચિત હશો. સર્વર પર, તે સમાન પરંતુ વધુ શક્તિશાળી ભૂમિકા ભજવે છે. જ્યારે તમે કોઈ કમ્પોનન્ટને ` ` બાઉન્ડ્રીમાં લપેટો છો, ત્યારે તમે રિએક્ટને કહી રહ્યા છો: "UI નો આ ભાગ કદાચ તરત જ તૈયાર ન હોય. તેની રાહ ન જુઓ. અત્યારે ફોલબેક મોકલો અને જ્યારે તે તૈયાર થાય ત્યારે વાસ્તવિક સામગ્રી સ્ટ્રીમ કરો." એક પેજની કલ્પના કરો જેમાં પ્રોડક્ટ વિગતોનો વિભાગ અને સોશિયલ મીડિયા ટિપ્પણીઓનું વિજેટ છે. ટિપ્પણીઓનું વિજેટ ઘણીવાર થર્ડ-પાર્ટી API પર આધાર રાખે છે અને ધીમું હોઈ શકે છે.
```jsx // પહેલાં: સર્વર fetchComments() ના ઉકેલની રાહ જુએ છે, જેનાથી આખું પેજ વિલંબિત થાય છે. function ProductPage({ productId }) { const comments = fetchComments(productId); return ( <>); } // પછી: સસ્પેન્સ સાથે, સર્વર ProductDetails તરત જ મોકલે છે. import { Suspense } from 'react'; const Comments = React.lazy(() => import('./Comments.js')); function ProductPage() { return ( <> }> ); } ``` આ ફેરફાર સાથે, સર્વર `Comments` કમ્પોનન્ટની રાહ જોતું નથી. તે `ProductDetails` માટે HTML અને `Spinner` ફોલબેક તરત જ મોકલે છે. `Comments` કમ્પોનન્ટ માટેનો કોડ બેકગ્રાઉન્ડમાં ક્લાયંટ પર લોડ થાય છે. એકવાર તે આવી જાય, રિએક્ટ તેને હાઈડ્રેટ કરે છે અને સ્પિનરને બદલી નાખે છે. વપરાશકર્તા મુખ્ય ઉત્પાદન માહિતીને ઘણી વહેલી જોઈ અને તેની સાથે સંપર્ક કરી શકે છે.
કોન્કરન્ટ રેન્ડરિંગની ભૂમિકા
કોન્કરન્ટ રેન્ડરિંગ એ અંતર્ગત એન્જિન છે જે આને શક્ય બનાવે છે. તે રિએક્ટને બ્રાઉઝરના મુખ્ય થ્રેડને અવરોધિત કર્યા વિના રેન્ડરિંગ કાર્યને રોકવા, ફરી શરૂ કરવા અથવા છોડી દેવાની મંજૂરી આપે છે. તેને UI અપડેટ્સ માટે એક અત્યાધુનિક ટાસ્ક મેનેજર તરીકે વિચારો.
હાઈડ્રેશનના સંદર્ભમાં, કોન્કરન્સી એ છે જે રિએક્ટને આ માટે સક્ષમ કરે છે:
- પ્રારંભિક HTML અને થોડું જાવાસ્ક્રિપ્ટ આવતાની સાથે જ પેજને હાઈડ્રેટ કરવાનું શરૂ કરો.
- જો વપરાશકર્તા બટન પર ક્લિક કરે તો હાઈડ્રેશન રોકો.
- વપરાશકર્તાના સંપર્કને પ્રાથમિકતા આપો, ક્લિક કરેલા બટનને હાઈડ્રેટ કરો અને તેના ઇવેન્ટ હેન્ડલરને એક્ઝિક્યુટ કરો.
- સંપર્ક હેન્ડલ થઈ જાય પછી બેકગ્રાઉન્ડમાં બાકીના પેજને હાઈડ્રેટ કરવાનું ફરી શરૂ કરો.
આ વિક્ષેપ પદ્ધતિ નિર્ણાયક છે. તે સુનિશ્ચિત કરે છે કે વપરાશકર્તા ઇનપુટ તરત જ હેન્ડલ થાય છે, જે ફર્સ્ટ ઇનપુટ ડિલે (FID) અને નવા, વધુ વ્યાપક ઇન્ટરેક્શન ટુ નેક્સ્ટ પેઇન્ટ (INP) જેવા મેટ્રિક્સમાં નાટકીય રીતે સુધારો કરે છે. પેજ ક્યારેય થીજી ગયેલું લાગતું નથી, ભલે તે હજી પણ બેકગ્રાઉન્ડમાં લોડ અને હાઈડ્રેટ થઈ રહ્યું હોય.
વ્યવહારુ અમલીકરણ: તમારી એપ્લિકેશનમાં સિલેક્ટિવ હાઈડ્રેશન લાવવું
થિયરી સરસ છે, પરંતુ ચાલો વ્યવહારુ બનીએ. તમે તમારી પોતાની રિએક્ટ એપ્લિકેશનમાં આ શક્તિશાળી સુવિધાને કેવી રીતે સક્ષમ કરશો?
પૂર્વજરૂરીયાતો અને સેટઅપ
પ્રથમ, ખાતરી કરો કે તમારો પ્રોજેક્ટ યોગ્ય રીતે સેટઅપ થયેલ છે:
- રિએક્ટ 18 માં અપગ્રેડ કરો: `react` અને `react-dom` બંને પેકેજો સંસ્કરણ 18.0.0 અથવા તેથી વધુ હોવા જોઈએ.
- ક્લાયંટ પર `hydrateRoot` નો ઉપયોગ કરો: જૂના `ReactDOM.hydrate` ને નવા `hydrateRoot` API સાથે બદલો. આ નવું API તમારી એપ્લિકેશનને કોન્કરન્ટ સુવિધાઓમાં પસંદ કરે છે.
```jsx
// client/index.js
import { hydrateRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
hydrateRoot(container,
); ``` - સર્વર પર સ્ટ્રીમિંગ API નો ઉપયોગ કરો: તમારે સ્ટ્રીમિંગ રેન્ડરરનો ઉપયોગ કરવો જ જોઇએ. Express અથવા Next.js જેવા Node.js પર્યાવરણો માટે, આ `renderToPipeableStream` છે. અન્ય પર્યાવરણોમાં તેમના પોતાના સમકક્ષ હોય છે (દા.ત., Deno અથવા Cloudflare Workers માટે `renderToReadableStream`).
કોડ ઉદાહરણ: એક પગલું-દર-પગલું માર્ગદર્શિકા
ચાલો સંપૂર્ણ પ્રવાહ દર્શાવવા માટે Express.js નો ઉપયોગ કરીને એક સરળ ઉદાહરણ બનાવીએ.
આપણી એપ્લિકેશનની રચના:
- એક `App` કમ્પોનન્ટ જેમાં `
` અને ` ` કન્ટેન્ટ એરિયા હોય છે. - એક `
` કમ્પોનન્ટ જે તરત જ ઉપલબ્ધ છે. - એક ધીમો `
` કમ્પોનન્ટ જેને આપણે કોડ-સ્પ્લિટ અને સસ્પેન્ડ કરીશું.
પગલું 1: સર્વર (`server.js`)
અહીં, અમે HTML ને ટુકડાઓમાં મોકલવા માટે `renderToPipeableStream` નો ઉપયોગ કરીએ છીએ.
```jsx // server.js import express from 'express'; import fs from 'fs'; import path from 'path'; import React from 'react'; import ReactDOMServer from 'react-dom/server'; import App from './src/App'; const app = express(); app.use('^/$', (req, res, next) => { const { pipe } = ReactDOMServer.renderToPipeableStream(, { bootstrapScripts: ['/main.js'], onShellReady() { res.setHeader('content-type', 'text/html'); pipe(res); } } ); }); app.use(express.static(path.resolve(__dirname, 'build'))); app.listen(3000, () => { console.log('Server is listening on port 3000'); }); ``` પગલું 2: મુખ્ય એપ કમ્પોનન્ટ (`src/App.js`)
આપણે આપણા `CommentsSection` ને ગતિશીલ રીતે આયાત કરવા માટે `React.lazy` નો ઉપયોગ કરીશું અને તેને `
```jsx // src/App.js import React, { Suspense } from 'react'; const CommentsSection = React.lazy(() => import('./CommentsSection')); const Spinner = () =>` માં લપેટીશું. ટિપ્પણીઓ લોડ થઈ રહી છે...
; function App() { return (); } export default App; ```My Awesome Blog Post
This is the main content. It loads instantly and is interactive right away.
}> પગલું 3: ધીમો કમ્પોનન્ટ (`src/CommentsSection.js`)
ધીમા કમ્પોનન્ટનું અનુકરણ કરવા માટે, આપણે એક સરળ યુટિલિટી બનાવી શકીએ છીએ જે તેના ઉકેલમાં વિલંબ કરવા માટે પ્રોમિસને લપેટે છે. વાસ્તવિક-દુનિયાના દૃશ્યમાં, આ વિલંબ જટિલ ગણતરીઓ, મોટા કોડ બંડલ અથવા ડેટા ફેચિંગને કારણે હોઈ શકે છે.
```jsx // નેટવર્ક વિલંબનું અનુકરણ કરવા માટે એક યુટિલિટી function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // src/CommentsSection.js import React from 'react'; // ધીમા મોડ્યુલ લોડનું અનુકરણ કરો await delay(3000); function CommentsSection() { return (); } export default CommentsSection; ```Comments
- Great post!
- Very informative, thank you.
(નોંધ: ટોપ-લેવલ `await` માટે એક આધુનિક બંડલર સેટઅપની જરૂર છે જે તેના માટે ગોઠવેલું હોય.)
રનટાઇમ દરમિયાન શું થાય છે?
- વિનંતી: વપરાશકર્તા પેજની વિનંતી કરે છે.
- પ્રારંભિક સ્ટ્રીમ: Node.js સર્વર રેન્ડરિંગ શરૂ કરે છે. તે `nav`, `h1`, `p`, અને `button` ને રેન્ડર કરે છે. જ્યારે તે `CommentsSection` માટે `
` બાઉન્ડ્રી પર પહોંચે છે, ત્યારે તે રાહ જોતું નથી. તે ફોલબેક HTML (` ટિપ્પણીઓ લોડ થઈ રહી છે...
`) મોકલે છે અને ચાલુ રાખે છે. પ્રારંભિક HTML ચંક બ્રાઉઝરને મોકલવામાં આવે છે. - ઝડપી FCP: બ્રાઉઝર આ પ્રારંભિક HTML ને રેન્ડર કરે છે. વપરાશકર્તા તરત જ નેવિગેશન બાર અને મુખ્ય પોસ્ટ સામગ્રી જુએ છે. ટિપ્પણી વિભાગ એક લોડિંગ સંદેશ બતાવે છે.
- ક્લાયંટ JS લોડ થાય છે: `main.js` બંડલ ડાઉનલોડ કરવાનું શરૂ કરે છે.
- સિલેક્ટિવ હાઈડ્રેશન શરૂ થાય છે: એકવાર `main.js` આવી જાય, રિએક્ટ પેજને હાઈડ્રેટ કરવાનું શરૂ કરે છે. તે `nav` અને `button` સાથે ઇવેન્ટ લિસનર્સ જોડે છે. વપરાશકર્તા હવે "Click Me" બટન પર ક્લિક કરી શકે છે અને એલર્ટ જોઈ શકે છે, ભલે ટિપ્પણીઓ હજી પણ "લોડિંગ" હોય.
- લેઝી કમ્પોનન્ટ આવે છે: બેકગ્રાઉન્ડમાં, બ્રાઉઝર `CommentsSection.js` માટે કોડ મેળવે છે. આપણે જે 3-સેકન્ડનો વિલંબ સિમ્યુલેટ કર્યો છે તે થાય છે.
- અંતિમ સ્ટ્રીમ અને હાઈડ્રેશન: એકવાર `CommentsSection.js` લોડ થઈ જાય, રિએક્ટ તેને હાઈડ્રેટ કરે છે, `Spinner` ને વાસ્તવિક ટિપ્પણી સૂચિ અને ઇનપુટ ફીલ્ડ સાથે એકીકૃત રીતે બદલી નાખે છે. આ વપરાશકર્તાને વિક્ષેપિત કર્યા વિના અથવા મુખ્ય થ્રેડને અવરોધિત કર્યા વિના થાય છે.
આ દાણાદાર, પ્રાથમિકતાવાળી પ્રક્રિયા સિલેક્ટિવ હાઈડ્રેશનનો સાર છે.
અસરનું વિશ્લેષણ: પરફોર્મન્સ લાભો અને વપરાશકર્તા અનુભવમાં જીત
સિલેક્ટિવ હાઈડ્રેશન અપનાવવું એ માત્ર નવીનતમ વલણને અનુસરવા વિશે નથી; તે તમારા વપરાશકર્તાઓને નક્કર સુધારાઓ પહોંચાડવા વિશે છે.
સુધારેલ કોર વેબ વાઇટલ્સ
- ટાઇમ ટુ ઇન્ટરેક્ટિવ (TTI): આમાં સૌથી નોંધપાત્ર સુધારો જોવા મળે છે. કારણ કે પેજના ભાગો હાઈડ્રેટ થતાં જ ઇન્ટરેક્ટિવ બની જાય છે, TTI હવે સૌથી ધીમા કમ્પોનન્ટ દ્વારા નક્કી થતો નથી. દૃશ્યમાન, ઉચ્ચ-પ્રાથમિકતાવાળી સામગ્રી માટે TTI ખૂબ વહેલો પહોંચી જાય છે.
- ફર્સ્ટ ઇનપુટ ડિલે (FID) / ઇન્ટરેક્શન ટુ નેક્સ્ટ પેઇન્ટ (INP): આ મેટ્રિક્સ પ્રતિભાવશીલતાને માપે છે. કારણ કે કોન્કરન્ટ રેન્ડરિંગ વપરાશકર્તા ઇનપુટને હેન્ડલ કરવા માટે હાઈડ્રેશનને વિક્ષેપિત કરી શકે છે, વપરાશકર્તાની ક્રિયા અને UI ના પ્રતિભાવ વચ્ચેનો વિલંબ ઓછો થાય છે. પેજ શરૂઆતથી જ ઝડપી અને પ્રતિભાવશીલ લાગે છે.
વધારેલ વપરાશકર્તા અનુભવ
તકનીકી મેટ્રિક્સ સીધા જ વધુ સારા વપરાશકર્તા પ્રવાસમાં અનુવાદિત થાય છે. SSR "અનકેની વેલી" નું નિવારણ એક મોટી જીત છે. વપરાશકર્તાઓ વિશ્વાસ કરી શકે છે કે જો તેઓ કોઈ એલિમેન્ટ જોઈ શકે છે, તો તેઓ તેની સાથે સંપર્ક કરી શકે છે. ધીમા નેટવર્ક પરના વૈશ્વિક પ્રેક્ષકો માટે, આ પરિવર્તનકારી છે. તેમને હવે સાઇટનો ઉપયોગ કરતા પહેલા મલ્ટિ-મેગાબાઇટ જાવાસ્ક્રિપ્ટ બંડલ સમાપ્ત થવાની રાહ જોવી પડતી નથી. તેમને ટુકડે ટુકડે એક કાર્યાત્મક, ઇન્ટરેક્ટિવ ઇન્ટરફેસ મળે છે, જે વધુ સુશોભિત અને સંતોષકારક અનુભવ છે.
પરફોર્મન્સ પર વૈશ્વિક પરિપ્રેક્ષ્ય
વૈશ્વિક ગ્રાહક આધારને સેવા આપતી કંપની માટે, નેટવર્કની ગતિ અને ઉપકરણની ક્ષમતાઓની વિવિધતા એક મોટો પડકાર છે. સિઓલમાં હાઇ-એન્ડ સ્માર્ટફોન સાથે 5G કનેક્શન પરના વપરાશકર્તાનો ગ્રામીણ વિસ્તારમાં બજેટ ઉપકરણ સાથે 3G કનેક્શન પરના વપરાશકર્તા કરતાં ઘણો અલગ અનુભવ હશે. સિલેક્ટિવ હાઈડ્રેશન આ અંતરને દૂર કરવામાં મદદ કરે છે. HTML સ્ટ્રીમ કરીને અને પસંદગીપૂર્વક હાઈડ્રેટ કરીને, તમે ધીમા કનેક્શન પરના વપરાશકર્તાને ખૂબ ઝડપથી મૂલ્ય પહોંચાડો છો. તેમને નિર્ણાયક સામગ્રી અને મૂળભૂત ઇન્ટરેક્ટિવિટી પ્રથમ મળે છે, જ્યારે ભારે કમ્પોનન્ટ્સ બેકગ્રાઉન્ડમાં લોડ થાય છે. આ અભિગમ દરેક માટે, દરેક જગ્યાએ વધુ સમાન અને સુલભ વેબ બનાવે છે.
સામાન્ય ભૂલો અને શ્રેષ્ઠ પ્રથાઓ
સિલેક્ટિવ હાઈડ્રેશનનો મહત્તમ લાભ લેવા માટે, આ શ્રેષ્ઠ પ્રથાઓ ધ્યાનમાં લો:
હાઈડ્રેશન અવરોધોને ઓળખવા
કયા કમ્પોનન્ટ્સ રેન્ડર અને હાઈડ્રેટ થવામાં સૌથી વધુ સમય લે છે તે ઓળખવા માટે રિએક્ટ ડેવટૂલ્સ પ્રોફાઇલરનો ઉપયોગ કરો. એવા કમ્પોનન્ટ્સ શોધો જે ક્લાયંટ પર ગણતરીની દ્રષ્ટિએ ખર્ચાળ હોય, મોટા ડિપેન્ડન્સી ટ્રી ધરાવતા હોય, અથવા ભારે થર્ડ-પાર્ટી સ્ક્રિપ્ટો શરૂ કરતા હોય. આ `
` માં લપેટવા માટેના મુખ્ય ઉમેદવારો છે. `
` નો વ્યૂહાત્મક ઉપયોગ `
` માં દરેક એક કમ્પોનન્ટને લપેટશો નહીં. આનાથી વિભાજિત લોડિંગ અનુભવ થઈ શકે છે. વ્યૂહાત્મક બનો. સસ્પેન્શન માટે સારા ઉમેદવારોમાં શામેલ છે: - ફોલ્ડની નીચેની સામગ્રી: જે કંઈપણ વપરાશકર્તા શરૂઆતમાં જોતા નથી.
- બિન-જરૂરી વિજેટ્સ: ચેટબોટ્સ, વિગતવાર એનાલિટિક્સ ચાર્ટ્સ, સોશિયલ મીડિયા ફીડ્સ.
- વપરાશકર્તાની ક્રિયાપ્રતિક્રિયા પર આધારિત કમ્પોનન્ટ્સ: મોડલ અથવા ટેબની અંદરની સામગ્રી જે ડિફોલ્ટ રૂપે દૃશ્યમાન નથી.
- ભારે થર્ડ-પાર્ટી લાઇબ્રેરીઓ: ઇન્ટરેક્ટિવ મેપ્સ અથવા જટિલ ડેટા વિઝ્યુલાઇઝેશન કમ્પોનન્ટ્સ.
ડેટા ફેચિંગ વિચારણાઓ
સિલેક્ટિવ હાઈડ્રેશન સસ્પેન્સ-સક્ષમ ડેટા ફેચિંગ સાથે હાથમાં હાથ મિલાવીને કામ કરે છે. જ્યારે રિએક્ટ કોઈ વિશિષ્ટ ડેટા-ફેચિંગ સોલ્યુશન સાથે આવતું નથી, ત્યારે રિલે જેવી લાઇબ્રેરીઓ અને Next.js જેવા ફ્રેમવર્કમાં બિલ્ટ-ઇન સપોર્ટ હોય છે. તમે કસ્ટમ હુક્સ પણ બનાવી શકો છો જે સસ્પેન્સ સાથે સંકલિત કરવા માટે પ્રોમિસ થ્રો કરે છે, જે તમારા કમ્પોનન્ટ્સને પ્રારંભિક સ્ટ્રીમને અવરોધિત કર્યા વિના સર્વર પર ડેટાની રાહ જોવાની મંજૂરી આપે છે.
SEO અસરો
અદ્યતન રેન્ડરિંગ તકનીકો સાથે એક સામાન્ય ચિંતા SEO છે. સદભાગ્યે, સિલેક્ટિવ હાઈડ્રેશન SEO માટે ઉત્તમ છે. કારણ કે પ્રારંભિક HTML હજી પણ સર્વર પર રેન્ડર થાય છે, સર્ચ એન્જિન ક્રોલર્સને તરત જ અર્થપૂર્ણ સામગ્રી મળે છે. Googlebot જેવા આધુનિક ક્રોલર્સ, જાવાસ્ક્રિપ્ટ પર પણ પ્રક્રિયા કરી શકે છે અને પછીથી સ્ટ્રીમ કરવામાં આવેલી સામગ્રીને જોશે. પરિણામ એ એક ઝડપી, ઇન્ડેક્સેબલ પેજ છે જે વપરાશકર્તાઓ માટે પણ ઉચ્ચ પ્રદર્શનકારી છે - એક વિન-વિન.
રિએક્ટમાં રેન્ડરિંગનું ભવિષ્ય: સર્વર કમ્પોનન્ટ્સ
સિલેક્ટિવ હાઈડ્રેશન એ એક પાયાની તકનીક છે જે રિએક્ટમાં આગામી મોટા વિકાસ માટે માર્ગ મોકળો કરે છે: રિએક્ટ સર્વર કમ્પોનન્ટ્સ (RSC).
સર્વર કમ્પોનન્ટ્સ એ એક નવા પ્રકારના કમ્પોનન્ટ છે જે ફક્ત સર્વર પર ચાલે છે. તેમની પાસે કોઈ ક્લાયંટ-સાઇડ જાવાસ્ક્રિપ્ટ ફૂટપ્રિન્ટ નથી, જેનો અર્થ છે કે તેઓ તમારા બંડલના કદમાં શૂન્ય કિલોબાઇટનું યોગદાન આપે છે. તેઓ સ્થિર સામગ્રી પ્રદર્શિત કરવા અથવા ડેટાબેઝમાંથી સીધો ડેટા મેળવવા માટે યોગ્ય છે.
ભાવિ દ્રષ્ટિ એ આર્કિટેક્ચર્સનું એકીકૃત મિશ્રણ છે:
- સ્થિર સામગ્રી અને ડેટા એક્સેસ માટે સર્વર કમ્પોનન્ટ્સ.
- ઇન્ટરેક્ટિવિટી માટે ક્લાયંટ કમ્પોનન્ટ્સ (આપણે આજે ઉપયોગ કરીએ છીએ તે કમ્પોનન્ટ્સ).
- સિલેક્ટિવ હાઈડ્રેશન એ પુલ તરીકે જે પેજના ઇન્ટરેક્ટિવ ભાગોને વપરાશકર્તાને અવરોધિત કર્યા વિના જીવંત બનાવે છે.
આ સંયોજન બધી દુનિયાનું શ્રેષ્ઠ પ્રદાન કરવાનું વચન આપે છે: સર્વર-રેન્ડર્ડ એપનું પ્રદર્શન અને સરળતા સાથે ક્લાયંટ-સાઇડ SPA ની સમૃદ્ધ ઇન્ટરેક્ટિવિટી.
નિષ્કર્ષ: વેબ ડેવલપમેન્ટમાં એક પેરાડાઈમ શિફ્ટ
રિએક્ટ સિલેક્ટિવ હાઈડ્રેશન માત્ર એક વૃદ્ધિશીલ પરફોર્મન્સ સુધારણા કરતાં વધુ છે. તે વેબ માટે આપણે કેવી રીતે નિર્માણ કરીએ છીએ તેમાં એક મૂળભૂત પેરાડાઈમ શિફ્ટનું પ્રતિનિધિત્વ કરે છે. મોનોલિથિક, 'બધું-અથવા-કંઈ નહીં' મોડેલથી દૂર જઈને, આપણે હવે એવી એપ્લિકેશનો બનાવી શકીએ છીએ જે વધુ દાણાદાર, સ્થિતિસ્થાપક અને વપરાશકર્તાની વાસ્તવિક ક્રિયાપ્રતિક્રિયાઓની આસપાસ કેન્દ્રિત હોય છે.
તે આપણને જે મહત્વનું છે તેને પ્રાથમિકતા આપવાની મંજૂરી આપે છે, પડકારજનક નેટવર્ક પરિસ્થિતિઓમાં પણ એક ઉપયોગી અને આનંદદાયક અનુભવ પ્રદાન કરે છે. તે સ્વીકારે છે કે વેબપેજના બધા ભાગો સમાન બનાવવામાં આવતા નથી અને ડેવલપર્સને ચોકસાઈ સાથે લોડિંગ પ્રક્રિયાને ગોઠવવા માટેના સાધનો આપે છે.
મોટા પાયે, વૈશ્વિક એપ્લિકેશન પર કામ કરતા કોઈપણ ડેવલપર માટે, રિએક્ટ 18 માં અપગ્રેડ કરવું અને સિલેક્ટિવ હાઈડ્રેશનને અપનાવવું હવે વૈકલ્પિક નથી - તે આવશ્યક છે. આજે જ `Suspense` અને સ્ટ્રીમિંગ SSR સાથે પ્રયોગ કરવાનું શરૂ કરો. તમારા વપરાશકર્તાઓ, ભલે તેઓ વિશ્વમાં ગમે ત્યાં હોય, તમને ઝડપી, સરળ અને વધુ પ્રતિભાવશીલ અનુભવ માટે આભાર માનશે.